<template>
  <div>
    <!--第一行-->
    <div class="first-line" style="display: flex; justify-content: space-around; gap: 5px; margin-bottom: 5px; flex-wrap: wrap;">
      <el-card style="flex: 2; min-width: 300px;">
        <div style="font-weight: bold; font-size: x-large;">
          欢迎！<span v-if="hasLogin">{{ loginUser.role+' '+loginUser.userName }}</span>
          <span v-else>请</span>
          <el-button type="text" @click="$router.push('/login')" v-if="!hasLogin">
            <div style="font-weight: bold; font-size: x-large;">
              登录
            </div>
          </el-button>
        </div>
        <hr>
        <map-drag lng="113.354788" lat="23.086655" style="width: 100%; height: 300px"></map-drag>
      </el-card>

      <el-card style="flex: 3; min-width: 300px">
        <!-- 走马灯-->
        <el-carousel :height="isMobile ? '0' : '373px'" style="max-height: 373px">
          <el-carousel-item>
            <img :src="require('@/assets/facade1.png')" :class="isMobile ? 'carousel-img-mobile' : 'carousel-img'" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img :src="require('@/assets/facade2.jpeg')" :class="isMobile ? 'carousel-img-mobile' : 'carousel-img'" alt="">
          </el-carousel-item>
          <el-carousel-item>
            <img :src="require('@/assets/facade3.jpg')" :class="isMobile ? 'carousel-img-mobile' : 'carousel-img'" alt="">
          </el-carousel-item>
        </el-carousel>
      </el-card>
    </div>
    <!--第二行-->
    <div style="display: flex; justify-content: space-between; gap: 5px; margin-bottom: 5px; flex-wrap: wrap;">
      <el-card style="flex: 1; min-width: 300px" v-if="loginUser.role==='业主'">
        <h1 style="padding-right: 10%">
          我的总得分
          <span :style="{color: levelColor}"> {{ totalPoint }}</span>
          <i class="el-icon-s-opportunity" @click="standardVis = true"
             style="color: #0dbaec; float: right; cursor: pointer;"></i>
        </h1>
        <!-- 分数雷达图-->
        <div id="point" style="width: 100%; height: 300px"></div>
      </el-card>
      <!-- 分数标准-->
      <el-dialog
          title="分数标准"
          :visible.sync="standardVis">
        <el-table :data="standard" border>
          <el-table-column prop="item" align="center" label="分数项"></el-table-column>
          <el-table-column prop="explain" align="center" label="标准" width="400"></el-table-column>
          <el-table-column prop="proportion" align="center" label="占比"></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="standardVis = false">确 定</el-button>
        </span>
      </el-dialog>

      <el-card style="flex: 1; min-width: 300px" class="container">
        <div slot="header">通知公告</div>
          <Notice/>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import Notice from "@/views/main/notice/notice.vue";
import MapDrag from "@/components/mapDrag.vue";
import {mobileWidth} from "@/utils/mobileWidth";

let option = {
  title: {
    text: '',
    // left: 'center',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  radar: {
    // shape: 'circle',
    name: {
      textStyle: {
        color: '#887f80',
        fontSize: 12,
      }
    },
    axisLine: {
      lineStyle: {
        color: '#05d5ff'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: '#05d5ff'
      }
    },
    indicator: [
      {name: '灭火器状态', max: 100},
      {name: '烟雾检测器状态', max: 100},
      {name: '通道疏通情况', max: 100},
      {name: '燃气情况', max: 100},
      {name: '电力系统情况', max: 100}
    ]
  },
  series: {
    name: '',
    type: 'radar',
    areaStyle: {
      normal: {
        color: '#05d5ff',
        opacity: 0.2
      }
    },
    label: {
      normal: {
        show: true,
        color: '#887f80',
        position: 'bottom',
      }
    },
    data: [
      {
        value: [100, 100, 100, 50, 100],
      },
    ]
  }
};

export default {
  name: "HomeView",
  components: {MapDrag, Notice},
  data() {
    return {
      // 是否开启移动端的适配
      isMobile: false,
      loginUser: {},
      hasLogin: false,
      levelColor: 'green',
      totalPoint: 0,
      myChart: {},
      standardVis: false,
      standard: [
          {
        item: '灭火器状态',
        explain: '铅封完好，压力指示在绿色区域（表明内部压力正常），无明显物理损坏，未超过到期时间',
        proportion: 0,
      }, {
        item: '烟雾检测器状态',
        explain: '电池电量充足，自检功能正常，无故障报警记录，定期测试符合要求',
        proportion: 0,
      }, {
        item: '通道疏通情况',
        explain: '等级0-3，越高越通畅',
        proportion: 0,
      }, {
        item: '燃气情况',
        explain: '燃气管道无泄漏，燃气表读数正常，自动切断阀功能有效，定期安检合格',
        proportion: 0,
      }, {
        item: '电力系统情况',
        explain: '电路无故障，电气设备绝缘良好，备用电源工作正常，负载分配合理，接地保护完善',
        proportion: 0,
      }]
    }
  },
  mounted() {
    //获取当前登录用户
    this.loginUser = JSON.parse(localStorage.getItem("user")) || {}
    this.hasLogin = this.loginUser.userName !== undefined
    // //request包装了axios，是异步请求，在request的下一行再setOption，实际上不知道request和setOption执行顺序
    if(this.loginUser.role==='业主'){
      this.getOwnerPoint()
      this.loadChart()
    }
    this.handleResize()
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    // 窗口宽度适配
    handleResize() {
      if (Object.keys(this.myChart).length !== 0) {
        this.myChart.resize()
      }
      this.isMobile = window.innerWidth < mobileWidth
      if (this.isMobile) {
        this.setCarouselHeight()
      }
    },
    //初始化echarts
    loadChart() {
      // v-if为false的时候，DOM元素直接不存在，所以此时获取不到DOM元素
      // nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 $nextTick，则可以在回调中获取更新后的 DOM
      this.$nextTick(()=>{
        let chartDom = document.getElementById('point');
        // this.myChart?.dispose()
        this.myChart = echarts.init(chartDom);
        this.myChart.setOption(option);
      })
    },
    //获取分数
    getOwnerPoint() {
      this.$request.get('/user/user/getOwnerPoint').then(res => {
        if (res.code === 200) {
          //总分
          this.totalPoint = res.data.totalPoint
          if (this.totalPoint >= 80) {
            this.levelColor = 'green'
          } else if (this.totalPoint >= 60) {
            this.levelColor = 'orange'
          } else {
            this.levelColor = 'red'
          }
          //echarts数据
          option.series.data[0].value = res.data.pointList
          //echarts数据变化时需要重新渲染
          this.myChart.setOption(option)
          //占比
          for (let i = 0; i < res.data.pointList.length; i++) {
            this.standard[i].proportion = res.data.proportion[i]
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取跑马灯图片的高度并设置跑马灯container的高度
    setCarouselHeight() {
      let img = document.querySelector('.carousel-img-mobile')
      if (!img) {
        img = document.querySelector('.carousel-img')
      }
      const carouselContainer = document.querySelector('.el-carousel__container')
      this.$nextTick(() => {
        carouselContainer.style.height = img.scrollHeight + 'px'
      })
    }
  }
}
</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 100%;
}
/*移动端的走马灯*/
.carousel-img-mobile {
  width: 100%;
  aspect-ratio: 5 / 3;
}

.container {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
}

/*公告省略部分的遮罩*/
.container::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px; /* 调整这个值以改变淡化区域的高度 */
  background: linear-gradient(to top, #d2d2d2, transparent); /* 从白色渐变到透明 */
  pointer-events: none; /* 允许鼠标点击穿透该遮罩 */
}
</style>
